<template>
  <component :is="iconType" :type="iconName" :color="iconColor" :size="iconSize" />
</template>

<script>
import Icons from './components/icons.vue';
import Svgs from './components/svgs.vue';
import settings from '@/settings';
export default {
  name: 'CommonIcon',
  components: { Icons, Svgs },
  props: {
    type: {
      type: String,
      default: () => ''
    },
    color: String,
    size: Number,
    svg: Boolean,
    font: Boolean
  },
  computed: {
    iconType() {
      if (this.isViewUI(this.type)) {
        return 'Icon';
      } else if (this.type.indexOf('-') != -1) {
        let categoryName = '';
        if (this.type.indexOf(' ') != -1) {
          categoryName = this.type.split(' ')[0];
        } else {
          categoryName = this.type.split('-')[0];
        }
        const category = settings.parse(`icons.${categoryName}`);
        if (category && category.endsWith && category.endsWith('.js')) {
          return 'Svgs';
        } else {
          return 'Icons';
        }
      } else {
        return 'Icon';
      }
    },
    iconName() {
      return this.type;
    },
    iconSize() {
      return this.size || (this.iconType === 'Icons' ? 12 : undefined);
    },
    iconColor() {
      return this.color || undefined;
    }
  },
  methods: {
    isViewUI(type) {
      return type.startsWith('ios') || type.startsWith('md');
    }
  }
};
</script>
